<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例网站</title>
</head>

<body>
    <header>
        <h1>网站一级标题</h1>
        <nav>
            <ul>
                <li>导航链接1</li>
                <li>导航链接2</li>
                <li>导航链接3</li>
                <li>导航链接4</li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <h1>文章一级标题</h1>
            <h2>文章二级标题</h2>
            <section>
                <span>文章作者</span>
                <span>文章发表时间</span>
            </section>
            <section>
                这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                <br>换行了
                <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                <b>这里有个粗体字</b>，这是一个很长很长的段落，
                <div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet" />
                </div>
                这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                <br>换行了
                <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                <b>这里有个粗体字</b>，这是一个很长很长的段落，
            </section>
        </article>
        <article>
            <h1>另一篇文章一级标题</h1>
            <h2>文章二级标题</h2>
            <section>
                <span>文章作者</span>
                <span>文章发表时间</span>
            </section>
            <section>
                这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                <br>换行了
                <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                <b>这里有个粗体字</b>，这是一个很长很长的段落，
                <div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet" />
                </div>
                <ul>
                    <li>列表项目1</li>
                    <li>列表项目2</li>
                    <li>列表项目3</li>
                    <li>列表项目4</li>
                </ul>
            </section>

            <h2>图片</h2>
            <section>
                <div>
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div>
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div>
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div>
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
            </section>
        </article>

        <article>
            <h1>最后一篇文章一级标题</h1>
            <h2>文章二级标题</h2>
            <section>
                <span>文章作者</span>
                <span>文章发表时间</span>
            </section>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <table border=1>
                <thead>
                    <tr>
                        <td>表头</td>
                        <td>表头</td>
                        <td>表头</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>总计</td>
                        <td colspan="2">1000</td>
                    </tr>
                </tfoot>
            </table>
        </article>
    </section>

    <aside>
        <header>
            <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
            <h2>侧栏注册窗口标题</h2>
            <form action="">
                <div>
                    <label for="form_email">请输入邮箱地址:</label>
                    <input type="email" name="email" id="form_email">
                    <div class="form_tip">邮箱地址请按要求格式输入</div>
                </div>
                <div>
                    <label for="form_pwd">请输入密码:</label>
                    <input type="password" name="pwd" id="form_pwd">
                    <label for="form_pwd2">请重复输入密码:</label>
                    <input type="password" name="pwd2" id="form_pwd2">
                    <div class="form_tip">密码请为6-16位英文和数字</div>
                </div>
                <div>
                    <span>
                        <label for="form_sex">性别：</label>
                        <input type="radio" name="sex" value="male" checked>男
                        <input type="radio" name="sex" value="female">女
                    </span>
                    <span>
                        <label for="form_city">城市</label>
                        <select name="city" id="form_city">
                            <option value="北京">北京</option>
                            <option value="南京">南京</option>
                        </select>
                    </span>
                    <span>
                        <label for="form_hobby">爱好</label>
                        <input type="checkbox" name="hobby" value="sport">运动
                        <input type="checkbox" name="hobby" value="art">艺术
                        <input type="checkbox" name="hobby" value="science">科学
                    </span>
                    <span>
                        <label for="form_des">个人描述</label>
                        <textarea name="des" id="form_des" cols="30" rows="10">这是一个多行输入框，请输入您的个人描述</textarea>
                    </span>
                    <span><input type="submit" value="确认提交"></span>
                </div>
            </form>
        </header>
    </aside>
    <footer>
        版权所有©
    </footer>
</body>

</html>